<template>
  <div class="app">
   <div class="publish">
    <!-- //头部 -->
    <div class="header">
           <span @click="$router.go(-1)">←</span>
           <span>编辑通知</span>
        </div>
    <!-- banner -->
    <div class="banner">
    <el-form :model="form" label-width="120px" ref="formRef" :rules="rules">
      <!-- 发布范围 -->
      <el-form-item label="发布范围：" prop="resource">
        <el-radio-group v-model="form.resource">
          <el-radio label="全部学校" />
          <el-radio label="指定学校" />
          <el-radio label="指定学段" />
        </el-radio-group>
      </el-form-item>
        <!-- 发布对象 -->
      <el-form-item label="发布对象：" prop="type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="老师" name="type" />
          <el-checkbox label="学生" name="type" />
          <el-checkbox label="家长" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <!-- 署名 -->
      <el-form-item label="署名" prop="name" >
          <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <!-- 定时发布 -->
      <el-form-item label="定时发布">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <!-- 发布时间 -->
        <el-form-item label="发布时间" label-width="120px" required>
          <el-col :span="11">
          <el-form-item prop="date1">
              <el-date-picker
                v-model="form.date1"
                type="date"
                label="Pick a date"
                placeholder="请选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                v-model="form.date2"
                label="Pick a time"
                placeholder="请选择时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
      <!--通知标题  -->
      <el-form-item label="通知标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入"/>
      </el-form-item>
      <!-- 通知内容 -->
      <el-form-item label="通知内容" prop="desc">
        <el-input v-model="form.desc" type="textarea" placeholder="请输入" />
      </el-form-item>
      <!-- 提交按钮 -->
        <el-form-item>
          <el-button   :plain="true" @click="onSubmit(formRef)">提交</el-button>
          <el-button @click="onReset(formRef)">取消</el-button>
        </el-form-item>
    </el-form>
    </div>
   </div>
  </div>
</template>

<script  setup>
import {useInformListStore} from '../stores/informlist'
import { reactive ,ref} from 'vue'
var formRef = ref();
const form = reactive({
  name: '',
  title:'',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
//定义表单验证规则
const rules = reactive({
  name: [
    { required: true, message: '请输入你的姓名', trigger: 'blur' },
  ],
  title:[
    { required: true, message: '请输入标题', trigger: 'blur' },
  ],
  desc:[
    { required: true, message: '请输入通知内容', trigger: 'blur' },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: '请选择发布日期',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: '请选择发布时间',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: '请至少选择一个发布对象',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: '请选择发布范围',
      trigger: 'change',
    },
  ],
})
//获取仓库数据
let $store= useInformListStore();
//设置提交事件
const onSubmit =async (formEl) => {
  if(!formEl) return
  await formEl.validate((valid,fields)=>{
    if(valid){
      console.log('submit!')
      $store.add_tableData(form);
      ElMessage({
      message: '发布通知成功！',
      type: 'success',
    })
    }else{
      console.log('error submit!', fields)
    }
  })
   
}
//设置取消提交事件
const onReset = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped>
.header{
    width: 100%;
    height: 80px;
    padding-left: 40px;
    box-sizing: border-box;
    line-height: 70px;
    color: rgba(24,144,255,1);
    box-shadow: 5px 5px 5px #cecaca;
}
.header span{
    margin-right: 20px;
}
.banner{
  box-sizing: border-box;
  padding: 80px 100px;
}
</style>